<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<link href="${pageContext.request.contextPath}/css/baStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/plupload/css/jquery-ui.min.css" media="screen" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/js/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/baPublicJs.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.shCircleLoader.js" type="text/javascript"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/js/jquery-ui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/js/plupload.full.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/js/i18n/zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js" charset="UTF-8"></script>
<script type="text/javascript">
		$(function() {
			$("#uploader").plupload({
				runtimes : 'html5,flash,silverlight,html4',
				url : "${pageContext.request.contextPath}/plupload/plupload.do",
				max_file_size : '1024mb',// 文件上传最大限制。
				chunk_size : '10mb',// 上传分块每块的大小，这个值小于服务器最大上传限制的值即可
				unique_names: true, // 上传的文件名是否唯一
				// 是否生成缩略图（仅对图片文件有效）
				resize : {
					width : 200,
					height : 200,
					quality : 90,
					crop : true
				},
				// 指定要浏览的文件类型
				filters : [ {
					title : "Image files",
					extensions : "jpg,gif,png"
				}, {
					title : "Zip files",
					extensions : "zip,rar"
				} ],
				// Rename files by clicking on their titles
				rename : true,
				// Sort files
				sortable : true,
				// 使文件到小部件能够拖放(操作)(目前唯一HTML5支持)
				dragdrop : true,
				// Views to activate
				views : {
					list : true,
					thumbs : true, // Show thumbs
					active : 'thumbs'
				},
				// Flash settings
				flash_swf_url : '${pageContext.request.contextPath}/js/plupload/js/Moxie.swf',
				// Silverlight settings
				silverlight_xap_url : '${pageContext.request.contextPath}/js/plupload/js/Moxie.xap',
				/* //设置参数
				multipart_params: {'colourType':$('#hiddenRadio').val()},    */
                init : {
                    FileUploaded : function(up, file, info) {//文件上传完毕触发
                    	/* result = "{\"parameter1\":\"chinaName\", \"parameter2\":\"oriFName\"}"; */
                      /* var response = $.parseJSON(info.response);
                       if ("chinaName"==response.parameter1) {
                        	alert("文件 {"+response.parameter2+"}出现中文错误，请修改后再上传!");  
                        } */
                    },
                    Error: function(up,err) {  
                        //当服务器端返回错误信息时error方法显示错误提示，  
                        //服务器端返回错误信息会被plupload转换为-200 http错误,  
                        //所以只能做==-200比较。更好的提示，需要修改插件源代码。  
                        if(err.code==-200){  
                           alert("文件 {"+err.file.name+"}出现中文或格式错误，请检查后重新上传!");   
                        }  
                        if(err.code==-602){  
                            alert("文件已存在!");  
                        }  
                    }
				
                }
			});
			//设置传给后台的参数给
			var myUploader = $('#uploader').plupload('getUploader');
			myUploader.bind('BeforeUpload', function(up, file) {
			    up.settings.multipart_params = {colourType : $("#hiddenRadio").val()};
			});
			
			//修改上传创建的右上角的显示为中文
			/* $("#uploader_view_list+label").find(".ui-button-text").text("列表");	
			$("#uploader_view_thumbs+label").find(".ui-button-text").text("列图");	 */
		});
		
		
		function radiovals(){
			//获取单选值
			var radioval="";
			var chkObjs = document.getElementsByName("radio");
	         for(var i=0;i<chkObjs.length;i++){
	         if(chkObjs[i].checked){
	            radioval=chkObjs[i].value;
	            break;
	           };
	         };	
	         return radioval;
		}
			
		//数据回显	
		function returnbatch(){
			var radioval=$("#hiddenRadio").val();
			
	       //调用遮罩层
		    shade();
			$.ajax({ 
			    type:"post",   
			    url:"${pageContext.request.contextPath}/baSkip/returnThumBatch.do", 
			    data:{"radioval":radioval}, 
			    dataType:"json",  
			    success: function(data){
			    var html="";
			    for(var i=0;i<data.length;i++){
			    	html=html+data[i].picname+"|"+data[i].desctibe+"# \r\n";
			      }
			    document.getElementById("batchFile").value=html;
			    //点击关闭按钮的时候，遮罩层关闭
				$("#bg,.box").css("display", "none");
			   }
			});
		}
		
		
        //数据提交
		function batchSave(){
			/* var radioval=radiovals(); */
			var radioval=$("#hiddenRadio").val();
	         var textarea=$("#batchFile").val();//获取文本域中的数据
	         //如果没有填写数据那么不能提交
	         if(textarea.indexOf("每条信息用井号隔开(#)隔开")>=0){
	        	 alert("请先填写要提交的数据！");
	        	 return;
	         }
	       //调用遮罩层
		    shade();
		    $.ajax({ 
		       type:"post",   
		       url:"${pageContext.request.contextPath}/baSkip/batchSave.do", 
		       data:{"radioval":radioval,"textarea":textarea}, 
		       dataType:"text",  
		       success: function(data){ 
		    		   if(data.indexOf("请求超时，请重新登陆")<0){
			    		   if("success"!=data){
			    			   var datas=data.split("_");
			    			   if(""!=datas[0]&&""!=datas[1]&&""!=datas[2]){
			    			       $("#help-block").css("display","block");
						    	   $("#help-block").text("出现重复名称:" +datas[0]); 
						    	  
						    	   $("#help-chName").css("display","block");
			    			       $("#help-chName").text("出现中文名称:" +datas[1]);
			    			       
			    			       $("#help-chName").css("display","block");
			    			       $("#help-yichang").text("异常数据:" +datas[2]);
			    			    }else if(""!=datas[0]&&""==datas[1]&&""==datas[2]){
				    			    $("#help-block").css("display","block");
								    $("#help-block").text("出现重复名称:" +datas[0]); 
								    
								    $("#help-chName").css("display","none");
								    $("#help-yichang").css("display","none");
			    			    }else if(""==datas[0]&&""!=datas[1]&&""==datas[2]){
			    			    	$("#help-chName").css("display","block");
				    			    $("#help-chName").text("出现中文名称:" +datas[1]);
				    			    
				    			    $("#help-block").css("display","none");
				    			    $("#help-yichang").css("display","none");
			    			    }else if(""==datas[0]&&""==datas[1]&&""!=datas[2]){
			    			    	$("#help-yichang").css("display","block");
				    			    $("#help-yichang").text("异常数据:" +datas[2]);
				    			    
				    			    $("#help-block").css("display","none");
				    			    $("#help-chName").css("display","none");
			    			    }
			    			    else if(""!=datas[0]&&""!=datas[1]&&""==datas[2]){
			    			    	$("#help-block").css("display","block");
							    	$("#help-block").text("出现重复名称:" +datas[0]); 
							    	  
							    	$("#help-chName").css("display","block");
				    			    $("#help-chName").text("出现中文名称:" +datas[1]);
				    			       
				    			    $("#help-yichang").css("display","none");
			    			    }else if(""!=datas[0]&&""==datas[1]&&""!=datas[2]){
			    			    	$("#help-block").css("display","block");
							    	$("#help-block").text("出现重复名称:" +datas[0]); 
							    	
			    			    	$("#help-yichang").css("display","block");
				    			    $("#help-yichang").text("异常数据:" +datas[2]);
				    			    
				    			    $("#help-chName").css("display","none");
			    			    }else if(""==datas[0]&&""!=datas[1]&&""!=datas[2]){
			    			    	$("#help-chName").css("display","block");
				    			    $("#help-chName").text("出现中文名称:" +datas[1]);
				    			    
			    			    	$("#help-yichang").css("display","block");
				    			    $("#help-yichang").text("异常数据:" +datas[2]);
				    			    
				    			    $("#help-block").css("display","none");
			    			    }
			    			 //点击关闭按钮的时候，遮罩层关闭
								$("#bg,.box").css("display", "none");
					    		alert("操作成功，提示数据修改后在提交！");
				    	}else{
				    		$("#help-block").css("display","none");
					    	$("#help-chName").css("display","none");
					    	$("#help-yichang").css("display","none");
					    	//点击关闭按钮的时候，遮罩层关闭
							$("#bg,.box").css("display", "none");
							alert("操作成功，请将对应的图片提交指定目录！");
					    	var colours=("col"==radioval)?"1":"0";
					    	refresh(colours);
				    	};     
		    	   }else{
		    		   alert("请求超时，请重新登入！"); 
		    		   window.location.href="${pageContext.request.contextPath}/login.jsp";
		    	   };
		         } 
		    }); 
		}
        
        //刷新使用，会将数据重新生成一遍
		function refresh(colour){
			$.ajax({
				type:"post", //提交的类型
				url: "${pageContext.request.contextPath}/baUser/returnRefresh.do",//提交地址
				data: {
				    "colour":colour,
				   },
				dataType: 'text',
				success: function(data){ //回调方法
					/* if('succeed'==data){
						alert("删除成功！");
					}else{
						alert("删除失败！");
					} */
				}
				});
		}    
	//单选框判断选择
	function radioClick(id,otherId){
		 $("#"+otherId).removeAttr("checked");//移除单选
		 document.getElementById(id).checked = "checked";//添加单选
		 $("#hiddenRadio").val($("#"+id).val());
	}
	</script>
<style type="text/css">
.forminfo li {
    clear: none;
}

.box div[id] {
	width: 100px;
	height: 100px;
	margin: 10px auto;
}

.box {
	position: absolute;
	width: 600px;
	left: 50%;
	height: auto;
	z-index: 100;
	padding: 1px;
}

#bg {
	background-color: #666;
	position: absolute;
	z-index: 99;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	filter: alpha(opacity = 50);
	-moz-opacity: 0.5;
}
</style>
</head>

<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">数据配置</a></li>
    <li><a href="#">批量上传</a></li>
    </ul>
    </div>
    <div class="formbody">
	    <div class="formtitle"><span>批量上传</span></div>
	    <ul class="forminfo">
		    <li><label>类型</label>
			   <!--  <cite id="radios"> -->
				    <input name='radio' id="colradio" type="radio" value="col" checked="checked" onclick="radioClick('colradio','blackradio');"/>彩色&nbsp;&nbsp;&nbsp;&nbsp;
				    <input name='radio' id="blackradio" type="radio" value="black" onclick="radioClick('blackradio','colradio');"/>黑白
			    <!-- </cite> -->
			    <input name="" type="button" onclick="returnbatch();" class="btn" value="数据回显" style="margin-left: 365px;"/>
		    </li>
		    <li>
			    <label>图片信息</label>
			     <textarea id="batchFile" class="form-control" rows="3" name="batchFile" style="width: 595px; height:350px;border:1px solid #a7b5bc"
			        onfocus="if (this.value==this.defaultValue){this.value='';this.style.color='#333'}"
					onkeyup="$('#tie').show()"
					onblur="if (this.value==''){this.value=this.defaultValue;this.style.color='#999'}"
					onkeydown="javascript:if(event.keyCode==13) search('key');"
					name="keyword" >每条信息用井号隔开(#)隔开，信息内部使用竖线(|)隔开.  如：编码|名称|排序(选填)#  ps：编码一定要和图片名称一一对应，否则无法显示图片</textarea>
				    <p id="help-block"  style="margin-left:90px;color:red;font-size:15px;display:none"></p>
				    <p id="help-chName"  style="margin-left:90px;color:red;font-size:15px;display:none"></p> 
				    <p id="help-yichang"  style="margin-left:90px;color:red;font-size:15px;display:none"></p>
		    </li>
		    <li><label>&nbsp;</label><input name="" type="button" onclick="batchSave();" class="btn" value="确认保存"/></li>
		    
		    <li>
			    <label>图片上传</label>
			    <div id="uploader" style="width: 600px;margin-left:85px">
					<p>您的浏览器没有安装Flash插件，或不支持HTML5！</p>
				</div>
		    </li>
	    </ul>
    </div>
    <input name='hiddenRadio' id="hiddenRadio" type="hidden" value="col"/>
  <!--遮罩和加载  -->
		<div id="bg"></div>
		<div class="box" style="display:none">
		   <div id="shclDefault"></div>
		</div>
</body>

</html>